<template>
  <div id="personal">
    <div class="container">
      <div class="profile">
        <div class="userinfo">
          <div class="item avatar"
               :style="`background-image: url('${this.$request.baseURL}${ userinfo.avatar}');`"
               @click="click_change_avatar">
            <div class="avatar-change"><div>更换头像</div></div>
            <input type="file" accept="image/jpeg" @change="change_avatar" id="change-avatar">
          </div>
          <div class="item info">
            <div class="username">{{ userinfo.username||"匿名用户" }}</div>
            <div class="email">邮箱：{{ userinfo.email }}</div>
          </div>
        </div>
        <div class="point">
          <div  class="content">
            <img src="../../assets/point.png" alt="">
            <div class="text">
              积分：{{ userinfo.point }} 分
            </div>
          </div>
        </div>
      </div>

      <div class="history">
        <table class="table">
          <thead class="thead">
            <tr class="th">
              <td class="td">ID</td>
              <td class="td">题目名称</td>
              <td class="td">题目环境</td>
              <td class="td">题目难度</td>
              <td class="td">题目类型</td>
              <td class="td">题目分数</td>
              <td class="td">答题时间</td>
            </tr>
          </thead>
          <tbody class="tbody" v-if="checked.length > 0">
            <tr class="tr" v-for="(data, index) in checked" :key="index" v-if="data.id">
              <td class="td">{{ data.image.id }}</td>
              <td class="td">{{ data.image.name }}</td>
              <td class="td">{{ check_flag[data.image.check_flag - 1] }}</td>
              <td class="td">{{ difficulty[data.image.difficulty - 1] }}</td>
              <td class="td">{{ category[data.image.category - 1] }}</td>
              <td class="td">
                <img src="../../assets/point.png" alt="" class="point_icon">
                {{ data.image.point }} 分
              </td>
              <td class="td">{{ formatTimer(data.create_time) }}</td>
            </tr>
            <tr class="tr" v-else style="opacity: 0;">
              <td class="td">#000000</td>
            </tr>
          </tbody>
          <tbody class="tbody nothing" v-else>
            <tr class="tr" style="opacity: 0;">
              <td class="td">#000000</td>
            </tr>
            <tr class="tr" style="text-align: center;position: absolute">
              还没有完成的题目呢，快去挑战吧。
            </tr>
            <tr class="tr" style="opacity: 0;">
              <td class="td">#000000</td>
            </tr>
            <tr class="tr" style="opacity: 0;">
              <td class="td">#000000</td>
            </tr>
            <tr class="tr" style="opacity: 0;">
              <td class="td">#000000</td>
            </tr>
            <tr class="tr" style="opacity: 0;">
              <td class="td">#000000</td>
            </tr>
            <tr class="tr" style="opacity: 0;">
              <td class="td">#000000</td>
            </tr>
            <tr class="tr" style="opacity: 0;">
              <td class="td">#000000</td>
            </tr>
          </tbody>
        </table>
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :page-size="7"
            :hide-on-single-page=true
            layout="total, prev, pager, next, jumper"
            :current-page="page"
            :total="count">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Personal',
  data() {
    return {
      userinfo: {},
      check_flag: ['镜像环境', '附件环境'],
      difficulty: ['新手', '入门', '普通', '高手'],
      category: ["MISC", "PWN", 'WEB', 'REVERSE'],
      count: 45,
      page: 1,
      checked: [],
    };
  },
  created() {
    this.get_userinfo();
    this.get_checked();
  },
  methods: {
    formatTimer (timer) {
      return new Date(timer).format('yyyy年MM月dd日 hh:mm:ss')
    },
    /**
     * 点击头像处，使用js模拟点击 input 空间
     */
    click_change_avatar() {
      this.$el.querySelector('#change-avatar').click()
    },
    /**
     * 更换头像
     * @param e
     * @returns {boolean}
     */
    change_avatar(e){
      let target = e.target || e.srcElement;

      /**
       * name: "1登录页.png"
       size: 1484470
       type: "image/png"
       */
      let file = target.files[0];

      if(!file) return false;

      try {
        if (file.type !== 'image/jpeg') {
          this.$message.error('图片格式错误!');
          return false;
        }
      }catch (e) {
        this.$message.error('图片格式错误!');
        return false;
      }

      let formData = new FormData();
      formData.append('avatar', file);
      this.$request.exec('post', 'avatar', formData, this,
        false, {headers:{'Content-Type':'multipart/form-data'}}).then((res) => {
        this.userinfo = res.data.user;
        this.$store.commit('update_avatar', res.data.user);
        this.channels.$emit('update_avatar');

        this.$message.success('更换成功');
      }).catch((res) => {
        this.$message.error(res.data.msg);
      })
    },
    /**
     * 页数切换
     * @param val
     */
    handleCurrentChange(val) {
      this.get_checked(val);
    },
    /**
     * 获取用户信息
     */
    get_userinfo() {
      this.$request.exec('get', 'get_userinfo', {'answers': true}, this)
        .then((res) => {
        this.userinfo = res.data.user;
      }).catch((res) => {
        this.$message.error(res.data.msg);
      })
    },
    /**
     * 获取当前用户答题记录
     * @param page
     */
    get_checked (page = 1) {
      this.$request.exec('get',`get_checked?page=${page}`, null, this).then((res) => {
        this.count = res.data.count;

        if(res.data.count === 0) {
          return;
        }

        let results = res.data.results;
        let calc_length = 7 - results.length;
        if(calc_length > 0) {
          for(let i = 0; i < calc_length; i++) {
            results.push('');
          }
        }

        this.checked = results;
      }).catch((res) => {
        this.$message.error(res.data.msg);
      })
    },
  },
};
</script>

<style scoped>
* {
  vertical-align: middle;
}

body {
  background-color: #000241;
}

#personal {
  /*padding-bottom: 3vw;*/
}

.container {
  background-image: url("../../assets/background.png");
  background-position: center center;
  background-size: cover;
  position: relative;
  padding: 2vw 7vw;
}

.profile {
  background: url('../../assets/personal/profile.png') 0 0 / 100% 100%;
  padding: 2vw 2.3vw;
}

.profile .item {
  display: inline-block;
  vertical-align: middle;
}

.avatar {
  width: 8.5vw;
  height: 8.5vw;
  border-radius: 100%;
  overflow: hidden;
  background-size: 110%;
  background-position: center center;
  border: 0.3vw solid #298dcc;
  margin-right: 1vw;
  user-select: none;
  cursor: pointer;
  background-image: url('../../assets/personal/avatar.png');
  background-color: #000a46;
  position: relative;
}

.avatar-change {
  display: none;
  height: 100%;
  width: 100%;
  background: #00000091;
}

.avatar:hover .avatar-change{
  display: block;
}

.avatar-change div {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 1vw;
}

.avatar input {
  opacity: 0;
  display: none;
}

.username {
  color: #61c5ff;
  font-family: PingFang-SC-Bold;
  font-size: 1.5vw;
}

.email {
  font-family: PingFang-SC-Medium;
  font-size: 1vw;
  color: #ffff;
  margin: 0.5vw 0;
}

.point .text {
  color: #ffffff;
  font-family: AdobeHeitiStd-Regular;
  font-size: 1.1vw;
}

.profile .userinfo,
.profile .point{
  display: inline-block;

}

.profile .userinfo {
  width: 70%;
}

.profile .point {
  text-align: right;
  width: 30%;
  padding-right: 1vw;
}

.point img {
  width: 2.8vw;
  margin-bottom: .5vw;
}

.point .content {
  text-align: center;
  display: inline-block;
}

.history {
  background: url('../../assets/personal/content.png') 0 0 / 100% 100%;
  margin-top: 1vw;
  width: calc(100% + .54vw);
  margin-left: -0.24vw;
  margin-bottom: 1vw;
  padding-bottom: 2vw;
}

.table {
  padding: 1vw;
  width: 100%;
  height: 100%;
}

.table * {
  vertical-align: middle;
  color: #ffffff;
  font-size: 1vw;
}

.tr, .th{
  width: 100%;
  cursor: pointer;
}

.td {
  text-align: center;
  padding: 0.8vw 0.7vw;
  border-bottom: 0.1vw solid #298dcc42;
}

.th .td {
  font-weight: bold;
}

.tr .td {
  color: #d8d8d8;
  white-space: nowrap;
}

.tr:hover {
  background: #0000001f;
}

.pagination {
  text-align: center;
  margin-top: 1vw;
  width: calc(100% - 2vw);
}

.nothing .td {
  border: none;
}

.nothing .tr:hover {
  background: none;
}

.td .point_icon {
  width: 1.1vw;
}

</style>
